import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CoreLayout from 'containers/layout'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { getDataSource, getFlagValue, showTeam, getTeamFlag, getPageFlag } from 'services/utils'
import { Form, Input, Button, message } from 'antd'
import { protoActions } from 'reduxs'
import _ from 'lodash'

const accessFlag = getPageFlag('/proto-tool/update-config', 'access')
const FormItem = Form.Item

@connect(
  state => ({
    auth                : state.Passport.auth,
    rtsp_key            : state.Passport.rtsp_key,
    postDataPending     : state.Proto.postDataPending,
    postDataError       : state.Proto.postDataError,
    postDataMessage     : state.Proto.postDataMessage,
    postDataProto       : state.Proto.postDataProto
  }),
  dispatch => ({
    actions: bindActionCreators({ 
      ...protoActions
    }, dispatch)
  })
)
@Form.create()
export default class UpdateConfig extends PureComponent {
  
  componentWillReceiveProps (nextProps) {
    const { postDataError, postDataMessage, postDataProto, rtsp_key } = nextProps
    if (rtsp_key !== this.props.rtsp_key) {
      return
    }
    if (postDataProto === 'update-config' && postDataError === 0 && this.props.postDataError === -1) {
      this.props.form.resetFields()
      message.success('配置表已发送！')
    }
  }

  render () {
    const { location, auth, form, postDataPending } = this.props
    const { getFieldDecorator } = form
    const options = {
      location,
      pageCode: accessFlag.value,
      breadcrumb: [
        { name: '主页', link: '/' },
        { name: '运营工具类' },
        { name: '更新配置表' }
      ],
    }
    return (
      <CoreLayout {...options}>
        <Form
          className="ant-advanced-search-form"
          onSubmit={this.handleSubmit}
          >
          <div className="content">
            <FormItem 
              label={(<span style={{ width: 80, display: 'inline-block' }}>配置表</span>)}
              required={false}
              >
              {getFieldDecorator('name', {
                rules: [
                  { required: true, message: `配置表 不能为空!` }
                ],
              })(
                  <Input 
                    style={{ width: 300 }} 
                    placeholder={'请输入表格名称，多个表分号隔开'}
                    />
              )}
            </FormItem>
            <FormItem style={{ marginLeft: 20 }}>
              <Button 
                type="primary" 
                htmlType="submit" 
                loading={postDataPending} 
                >
                立即更新
              </Button>
            </FormItem>
          </div>
        </Form>
      </CoreLayout>
    )
  }

  handleSubmit = (e) => {
    e && e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.actions.postData('update-config', values, this.props.rtsp_key)
      }
    })
  }
}